<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-8">
				<div class="card">
					<div class="card-body">
						<div id="toolbar" style="width: 50vw;">
							<form class="row" role="form" onsubmit="javascript:return false;">
								<div class="col-md-4">
									<div class="row">
										<label class="col-md-3 col-form-label" for="name">名称</label>
										<div class="col-md-9">
											<input type="text" class="form-control" name="name" />
										</div>
									</div>
								</div>
								<div class="col-md-3">
									<button class="btn btn-primary" data-toggle="tableSearch">搜索</button>
									<button type="reset" class="btn btn-default ms-1">重置</button>
								</div>
							</form>
							<div class="mt-2">
								<button class="btn btn-primary me-1" data-handle="add" data-perm="role/add" hidden><i class="mdi mdi-plus"></i>
									新增</button>
							</div>
						</div>
						<table id="table"></table>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card" id="rolePerm" hidden>
					<div class="card-head">
						<button class="btn btn-primary m-2" id="authBtn" data-perm="role/authPermission" hidden><span class="mdi mdi-lock-check-outline"></span>赋权</button>
					</div>
					<div class="card-body">
						<div id="tree"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script id="dialog" type="text/html">
		<form class="needs-validation" novalidate  id="dialogForm">			
		  <div class="row mb-3">
		    <label for="id" class="col-sm-2 col-form-label text-end required">ID</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="id" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="name" class="col-sm-2 col-form-label text-end required">名称</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="name" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="description" class="col-sm-2 col-form-label text-end">描述</label>
		    <div class="col-sm-10">
			  <textarea class="form-control" name="description" rows="3"></textarea>
		    </div>
		  </div>
		  <div class="row">
			 <div class="col-md-4 offset-md-8">
				<button type="button" class="btn btn-secondary me-1" data-bs-dismiss="modal">取消</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
		  </div>
		  
		</form>
	</script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var layer = admin.getModule("layer");
		var request = admin.getModule("request");
		var button = admin.getModule("button");
		var form = admin.getModule("form");
		var table = admin.getModule("table");

		var dialogHtml = $("#dialog").html();
		var dialogData = {
			handle: '',
			dialog: null,
		};
		var tree = null;

		var tableInst = table.initTable({
			elem: "#table",
			url: 'role/search',// 请求地址
			onClickRow: showPermission,
			singleSelect: true,
			clickToSelect: true,
			columns: [{
				checkbox: true
			}, {
				field: 'id',
				align: 'center',
				title: 'ID',
			}, {
				field: 'name',
				align: 'center',
				title: '名称',
			}, {
				field: 'description',
				// 是否可视(默认 - true)
				align: 'center',
				title: '描述'
			}, {
				title: '操作',
				formatter: btnGroup,  // 自定义方法
				events: {
					'click .edit-btn': edit,
					'click .del-btn': deleteHandle
				}
			}]
		})

		initTree();

		$('[data-handle="add"]').click(function () {
			add();
		})
		$('#authBtn').click(function () {
			authPermission();
		})

		function add() {
			dialogData.handle = "role/add";
			dialogData.dialog = layer.dialog("添加角色", dialogHtml);
			dialogEvent();
		}

		function edit(e, value, row, index) {
			dialogData.handle = "role/edit";
			dialogData.dialog = layer.dialog("修改角色", dialogHtml);
			dialogEvent();
			$("#dialogForm input[name='id']").attr("readonly", "true")
			form.val("#dialogForm", row)
		}

		function deleteHandle(e, value, row, index) {
			layer.confirm("确认删除角色" + row.name, function () {
				request.postAlert("role/delete", {id: row.id}).then(res => {
					tableInst.bootstrapTable("refresh");
				})
			})
		}

		function dialogEvent() {
			$("#dialogForm").submit(function () {
				var btn = button.load({elem: "#dialogForm button[type='submit']"});
				if (!form.validate($(this))) {
					btn.stop();
					return false;
				}
				var data = form.val($(this));
				request.postAlert(dialogData.handle, data).then(res => {
					dialogData.dialog.hide();
					tableInst.bootstrapTable("refresh");
				}).catch(err => {
					btn.stop();
				})
				return false;
			})
		}


		// 自定义操作按钮
		function btnGroup() {
			let html =
				'<a href="#!" class="btn btn-sm btn-default me-1 edit-btn"  title="编辑" data-perm="role/edit" hidden><i class="mdi mdi-pencil"></i></a>' +
				'<a href="#!" class="btn btn-sm btn-default del-btn"   title="删除" data-perm="role/delete" hidden><i class="mdi mdi-trash-can-outline"></i></a>';
			return html;
		}

		function initTree() {
			request.post('permission/list', {}).then(res => {
				var tempData = {id: 0, children: []};
				packTreeData(res.data, tempData);
				tree = $('#tree').tree({
					cascadeCheck: false,
					checkboxes: true,
					uiLibrary: 'bootstrap',
					iconsLibrary: 'materialicons',
					dataSource: tempData.children,
					primaryKey: 'id',
					icons: {
						expand: '<i class="mdi mdi-plus"></i>',
						collapse: '<i class="mdi mdi-minus"></i>'
					}
				});
				tree.expandAll();
			})
		}

		function packTreeData(data, tempData) {
			for (var i in data) {
				if (data[i].pid == tempData.id) {
					var node = {};
					node.id = data[i].id;
					node.text = data[i].title;
					tempData.children.push(node);
					if (data[i].type != '03') {
						node.children = [];
						packTreeData(data, node);
					}
				}
			}
			if (tempData.children.length == 0) {
				delete tempData.children;
			}
		}

		function showPermission(row) {
			$("#rolePerm").removeAttr("hidden");
			tree.uncheckAll();
			request.post('permission/listByRoleId', {id: row.id}).then(res => {
				let keys = []
				res.data.forEach(item => {
					var node = tree.getNodeById(item.id)
					tree.check(node);
				})
			})
		}

		function authPermission() {
			var btn = button.load({elem: "#authBtn"});
			var checkData = $("#table").bootstrapTable("getSelections");
			var treeData = tree.getCheckedNodes();
			if (checkData.length > 0) {
				var roleId = checkData[0].id;
				request.postAlert('role/authPermission', {roleId: roleId, permissionIds: treeData}).then(res => {
					btn.stop();
				}).catch(err => {
					btn.stop();
				});
			}

		}

	</script>
</body>

</html>